<template>
  <el-dialog v-if="dialog" title="员工选择" custom-class="out-dialog" :close-on-click-modal="false" append-to-body :visible.sync="dialog">
    <div class="card-list">
      <el-card shadow="never" class="tableCard">
        <el-tree
          ref="tree"
          :data="departmentTreeList"
          :props="defaultProps"
          highlight-current
          :check-on-click-node="true"
          :expand-on-click-node="false"
          default-expand-all
          node-key="id"
          :current-node-key="currentNodekey"
        />
      </el-card>
    </div>
    <div class="footer-container">
      <div slot="footer" class="dialog-footer" style="justify-content: right; float: right;">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getDepartmentUnionEmployeeTreeList } from '@/api/cop/contact'

export default {
  components: {
  },
  props: {
    chooseList: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentNodekey: '1',
      departmentTreeList: [],
      checkList: [],
      checked: false,
      checkedNum: 0,
      active: 1,
      dialog: false,
      selectList: [],
      props: {
        children: 'children',
        value: 'id',
        label: 'name',
        emitPath: false
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      }
    }
  },
  watch: {
    dialog(val) {
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    refreshParams(params) {
      this.searchParams = params
      this.getList()
    },
    getList() {
      getDepartmentUnionEmployeeTreeList({ parentId: '0' }).then(res => {
        this.departmentTreeList = res
      })
    },
    clickSure() {
      if (!this.checkList) {
        this.$message.error('请选择至少一条记录')
        return false
      }

      this.$emit('getSelectedRecords', this.checkList)
      this.dialog = false
    }
  }
}
</script>

<style lang="scss">
.card-list {
  width: 100%;
}
.out-dialog {
  width: 900px;
}
.footer-container{
   >div{
      display: inline-flex;
     &:first-child{
         padding: 10px;
         cursor: pointer;
         margin-left: 10px;
         font-size: 10px;
         &::before{
           font-size: 40px;
           justify-content: center;
           color: #fff;
         }
       }
       &:last-child{
         cursor: pointer;
         justify-content: right;
         float: right;
         font-size: 14px;
       }
   }
}
</style>
